<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
		<title></title>
		<style>
			body{
				margin: 0;
			}
			
			.hd-item {
				float: left;
				width: 25%;
				/* padding: 0px 20px; */
				text-align: center;
				line-height: 60px;
				color: #EFEFEF;
				height: 60px;
				font-size: 18px;
			}
			
			.hd-item:hover{
				background-color: #00BA97;
			}
			
			.bd{
				height: 500px;
				width: 80%;
				margin: 20px auto;
			}
			
			.bd .bd-left{
				float: left;
				width: 20%;
				height: 500px;
			}
			
			.left_item{
				box-sizing: border-box;
				/* 实现居中 */
				display: flex;
				align-items: center;
				width: 100%;
				padding-left: 5px;
				margin-bottom: 5px;
				height: 10%;
				background-color: #EFEFEF;
				color: #666666
			}
			
			.bd .bd-right{
				float: right;
				width: 70%;
				height: 500px;
			}
			
			.bd-right .right-head{
				height: 30%;
				width: 100%;
				background-color: #0385ff;
				font-size: 35px;
				font-weight: 600;
				color: #EFEFEF;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			
			.bd-right .right-bd{
				width: 100%;
				height: 70%;
			}
			
			.bd-right .title{
				display: flex;
				align-items: center;
				font-size: 30px;
				font-weight: 600;
				width: 100%;
				height: 30%;
			}
		</style>
	</head>
	<body>
		<div class="hd" style="height: 60px; background-color: #666666;">
			<div class="hd-item">
				主页
			</div>
			<div class="hd-item">
				新闻
			</div>
			<div class="hd-item">
				联系我们
			</div>
			<div class="hd-item">
				关于我们
			</div>
		</div>
		
		<div class="bd">
			<div class="bd-left">
				<div class="left_item">
					HTML5
				</div>
				<div class="left_item">
					CSS
				</div>
				<div class="left_item">
					Javascript
				</div>
				<div class="left_item">
					Node.js
				</div>
				<div class="left_item">
					Vue.js
				</div>
				<div class="left_item">
					React.js
				</div>
				<div class="left_item">
					HTML5
				</div>
			</div>
			<div class="bd-right">
				<div class="right-head">
					这是标题
				</div>
				<div class="right-bd">
					<div class="title">
						HTML5
					</div>
					<p>这是内容内容内容这是内容内容内容这是内容内容内容这是内容内容内容这是内容内容内容</p>
				</div>
			</div>
		</div>
		<div class="bottom" style="width: 100%; height: 50px; background-color: #3D3D3D;">
			
		</div>
	</body>
</html>
